<% var headContent = { %>
<script type="text/javascript" src="${base}/template/admin/js/utils.js" charset="UTF-8"></script>
<style>

/*验证：提示信息样式 begin*/
.am-alert-danger {
    background-color: transparent;
    border-color: transparent;
    color: red;
}

.am-alert {
    margin-bottom: 1em;
    padding: .625em;
    background: transparent;
    border: none;
    border-radius: 0;
}
/*验证：提示信息样式 end*/
</style>
<%};%> <%layout("/common/_layout.html",{head:headContent}){%>
<form method="post" class="am-form" id="pmsForm"
    action="${base}/permission/save">
    <!--选项卡（tabs）begin-->
    <div class="am-tabs am-margin" data-am-tabs>
        <ul class="am-tabs-nav am-nav am-nav-tabs">
            <li class="am-active"><a href="#tab1">资源配置</a></li>
        </ul>
        <div class="am-tabs-bd">
            <div class="am-tab-panel am-fade am-in am-active" id="tab1">
            <input name="permissionID" id="permissionID" type="hidden"
                    value="${permissionID!}" /> 
                <!--验证表单元素（validate) begin-->

                <div class="am-g am-form-group am-margin-top">
                    <div class="am-u-sm-4 am-u-md-2 am-text-right">
                        <span style="color: red;">*</span>名称
                    </div>
                    <div class="am-u-sm-6 am-u-md-6">
                        <input name="pmsName" class="js-ajax-validate"
                            data-validate-async data-validation-message="请输入资源名称（10字符以内）"
                            type="text" id="pmsName" value="${pmsName!}" minlength="1"
                            maxlength="10" placeholder="请输入资源名称（10字符以内）" required />
                    </div>
                    <div class="am-u-sm-2 am-u-md-4 input-msg"></div>
                </div>

                <div class="am-g am-form-group am-margin-top">
                    <div class="am-u-sm-4 am-u-md-2 am-text-right">
                        图标
                    </div>
                    <div class="am-u-sm-6 am-u-md-6">
                        <input type="text" class="am-input" name="pmsIcon"  maxlength="50"
                            value="${pmsIcon!}" />
                    </div>
                    <div class="am-u-sm-2 am-u-md-4 input-msg"></div>
                </div>

                <div class="am-g am-form-group am-margin-top">
                    <div class="am-u-sm-4 am-u-md-2 am-text-right"><span style="color: red;">*</span>URL</div>
                    <div class="am-u-sm-6 am-u-md-6">
                        <input type="text" class="am-input" data-validate-async data-validation-message="请输入资源URL地址（50字符以内）" 
                        name="pmsUrl" placeholder="请输入资源URL地址（50字符以内）" maxlength="50"
                            value="${pmsUrl!}" required />
                    </div>
                    <div class="am-u-sm-2 am-u-md-4 input-msg"></div>
                </div>
                
                <div class="am-g am-form-group am-margin-top">
                    <div class="am-u-sm-4 am-u-md-2 am-text-right"><span style="color: red;">*</span>权限编码</div>
                    <div class="am-u-sm-6 am-u-md-6">
                        <input type="text" class="am-input" data-validate-async data-validation-message="请输入权限编码（20字符以内）" 
                        name="pmsCode" placeholder="请输入权限编码（20字符以内）" maxlength="20"
                            value="${pmsCode!}" required />
                    </div>
                    <div class="am-u-sm-2 am-u-md-4 input-msg"></div>
                </div>

                <div class="am-g am-form-group am-margin-top">
                    <div class="am-u-sm-4 am-u-md-2 am-text-right"><span style="color: red;">*</span>父ID</div>
                    <div class="am-u-sm-6 am-u-md-6">
                        <input type="text" class="am-input js-pattern-sort" data-validate-async data-validation-message="请输入该资源的父ID（纯数字）" 
                        name="pmsParentID" placeholder="请输入该资源的父ID" maxlength="11" onkeyup="value=value.replace(/[^\d]/g,'') " 
                        onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"
                            value="${pmsParentID!}" required />
                    </div>
                    <div class="am-u-sm-2 am-u-md-4 input-msg"></div>
                </div>
                
                <div class="am-g am-form-group am-margin-top">
                    <div class="am-u-sm-4 am-u-md-2 am-text-right"><span style="color: red;">*</span>LEVEL</div>
                    <div class="am-u-sm-6 am-u-md-6">
                        <select data-am-selected id="pmsLevel" name="pmsLevel">
	                        <option value="1" <%if(pmsLevel! == 1) {%>selected<%}%>>1</option>
	                        <option value="2" <%if(pmsLevel! == 2) {%>selected<%}%>>2</option>
	                        <option value="3" <%if(pmsLevel! == 3) {%>selected<%}%>>3</option>
	                        <option value="4" <%if(pmsLevel! == 4) {%>selected<%}%>>4</option>
	                        <option value="5" <%if(pmsLevel! == 5) {%>selected<%}%>>5</option>
                        </select>
                    </div>
                    <div class="am-u-sm-2 am-u-md-4 input-msg"></div>
                </div>
                
                <div class="am-g am-form-group am-margin-top">
                    <div class="am-u-sm-4 am-u-md-2 am-text-right"><span style="color: red;">*</span>节点类型</div>
                    <div class="am-u-sm-6 am-u-md-6">
                        <select data-am-selected id="PmsType" name="pmsType">
	                        <option value="1" <%if(pmsType! == 1) {%>selected<%}%>>非叶子节点</option>
	                        <option value="2" <%if(pmsType! == 2) {%>selected<%}%>>叶子节点</option>
                        </select>
                    </div>
                    <div class="am-u-sm-2 am-u-md-4 input-msg"></div>
                </div>

                <div class="am-g am-form-group am-margin-top">
                    <div class="am-u-sm-4 am-u-md-2 am-text-right"><span style="color: red;">*</span>排序</div>
                    <div class="am-u-sm-6 am-u-md-6">
                        <input type="text" class="am-input js-pattern-sort" name="pmsSort"  data-validation-message="排序不能为空且只能是纯数字" placeholder="请输入纯数字,越小越向前" maxlength="11" required
                            value="${pmsSort!5}" />
                    </div>
                    <div class="am-u-sm-2 am-u-md-4 input-msg"></div>
                </div>

                <div class="am-g am-form-group am-margin-top">
                    <div class="am-u-sm-4 am-u-md-2 am-text-right">备注</div>
                    <div class="am-u-sm-6 am-u-md-6">
                        <input type="text" class="am-input" data-validate-async data-validation-message="请输入备注信息（100字符以内）" 
                        name="pmsRemark" placeholder="请输入备注信息（100字符以内）" maxlength="100"
                            value="${pmsRemark!}" />
                    </div>
                    <div class="am-u-sm-2 am-u-md-4 input-msg"></div>
                </div>
                                
            </div>
            <!--验证表单元素（validate end-->
        </div>
    </div>
    </div>
    <!--选项卡（tabs）end-->
    <div class="am-margin">
        <button type="submit" class="am-btn am-btn-primary am-btn-xs">提交保存</button>
        <button type="button" class="am-btn am-btn-warning am-btn-xs"
            onclick="javascript:history.go(-1);">返回上一级</button>
    </div>
</form>
<script type="text/javascript">

    $(function(){
    /*表单验证：begin*/
    //自定义规则，用法：验证元素上加class="js-pattern-sort"
    if ($.AMUI && $.AMUI.validator) {
      $.AMUI.validator.patterns.sort = /^([0-9]+)$/;
    }
    $("#pmsForm").validator({
      // 域通过验证时回调
      onValid: function(validity) {
        $(validity.field).closest('.am-form-group').find('.am-alert').hide();
      },
      // 验证出错时的回调， validity 对象包含相关信息，格式通 H5 表单元素的 validity 属性
      onInValid: function(validity) {
        var $field = $(validity.field);
        var $group = $field.closest('.am-form-group');
        var $alert = $group.find('.am-alert');
        // 使用自定义的提示信息 或 插件内置的提示信息
        var msg = $field.data('validationMessage') || this.getValidationMessage(validity);

        if (!$alert.length) {
          $alert = $("<div class='am-alert am-alert-danger'></div>").hide().
          appendTo($group.find(".input-msg"));
        }
        console.log("onInValid : "+$field.val());
        $alert.html(msg).show();
      }
    });
    /*表单验证：end*/
    
});
</script>
<%}%>
